<template>
  <CommonDialog :dialogShow.sync="dialogShow" @makeSure="makeSure" title="日程详情">
    <template #content>
      <div class="content">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item v-for="(item, index) in curInfo.raceList"
            :title="item.name + '  ' + item.startTime + ' - ' + item.endTime" :name="item.id">
            <div class="content">
              <div class="content-item">
                <span class="label">比赛地点：</span>
                <div class="val">{{ item.area }}</div>
              </div>
              <div class="content-item">
                <span class="label">比赛人员：</span>
                <div class="val">
                  <span class="name" v-for="(item, index) in item.userList" :key="index">{{
                    item.name
                  }}</span>
                </div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item v-for="(item, index) in curInfo.trainList"
            :title="item.name + '  ' + item.startTime + ' - ' + item.endTime" :name="item.id">
            <div class="content-item">
              <span class="label">训练地点：</span>
              <div class="val">{{ item.area }}</div>
            </div>
            <div class="content-item">
              <span class="label">训练人员：</span>
              <div class="val">
                <span class="name" v-for="(item, index) in item.userList" :key="index">{{
                  item.name
                }}</span>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </template>
  </CommonDialog>
</template>

<script>
export default {
  name: "ChangNoticeDialog",
  props: {
    dateDialogShow: [Boolean],
    curInfo: {
      typeof: Object,
      default: () => { },
    },
  },
  data() {
    return {
      activeName: "1",
    };
  },
  computed: {
    dialogShow: {
      get() {
        return this.dateDialogShow;
      },
      set(v) {
        this.$emit("update:dateDialogShow", v);
      },
    },
  },
  mounted() {
    console.log(this.curInfo);
  },

  methods: {
    makeSure() { },
  },
};
</script>
<style lang="less" scoped>
::v-deep {
  .content-item {
    display: flex;
    background-color: #fff !important;

    .val{
      .name{
        margin-right: 5px;
      }
    }
  }
}
</style>
